<template>
  <div class="main">
    <el-scrollbar>
      <div class="layout">
        <MainHeader />
        <div style="text-align: center">
          <div style="display: inline-block; min-width: 1000px; width: 60%">
            <div class="basic">
              <BasicInfo :user="user" />
            </div>
            <div class="more">
              <el-menu mode="horizontal" :default-active="activeIndex" active-text-color="#409EFF" style="margin: 3px;"
                router>
                <el-menu-item index="1" :route="{ path: '/user', query: { id: user.id } }"><i
                    class="el-icon-s-data"></i><span>总览</span></el-menu-item>
                <el-menu-item index="2" :route="{ path: '/user/learninginfo', query: { id: user.id } }"><i
                    class="el-icon-s-management"></i><span>学习</span></el-menu-item>
                <el-menu-item index="3" :route="{ path: '/user/publishinfo', query: { id: user.id } }"><i
                    class="el-icon-upload"></i><span>发布</span></el-menu-item>
                <el-menu-item index="4" :route="{ path: '/user/collectinfo', query: { id: user.id } }"><i
                    class="el-icon-star-on"></i><span>收藏</span></el-menu-item>
              </el-menu>
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>

    </el-scrollbar>

  </div>
</template>

<script>
import MainHeader from '../components/MainHeader.vue';
import BasicInfo from '../components/UserInfo/BasicInfo.vue';
import request from '@/API/request';
import { Message } from 'element-ui';
export default {

  data() {
    return {
      user: {},
    }
  },
  computed: {
    activeIndex() {
      if (this.$route.path === '/user') {
        return '1';
      } else if (this.$route.path === '/user/learninginfo') {
        return '2';
      } else if (this.$route.path === '/user/publishinfo') {
        return '3';
      } else {
        return '4';
      }
    }
  },
  components: {
    MainHeader, BasicInfo,
  },

  methods: {

  },
  mounted() {
    request.get('/user/get/userinfo', {
      params: {
        id: this.$route.query.id,
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.user = res.data.data;
      } else {
        Message({
          message: res.data.msg,
          type: 'error',
          customClass: 'message-global',
        });
      }
    }).catch(err => {
      Message({
        message: err,
        type: 'error',
        customClass: 'message-global',
      });
    });
  },
  beforeRouteUpdate(to, from, next) {
    request.get('/user/get/userinfo', {
      params: {
        id: to.query.id,
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.user = res.data.data;
      } else {
        Message({
          message: res.data.msg,
          type: 'error',
          customClass: 'message-global',
        });
      }
    }).catch(err => {
      Message({
        message: err,
        type: 'error',
        customClass: 'message-global',
      });
    });
    next();
  },

}
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
}

.basic {
  display: inline-block;
  width: 100%;
  height: 200px;
  border-radius: 5px;
}

.more {
  display: inline-block;
  width: 100%;
  min-width: 800px;
  border-radius: 5px;
  margin-top: 20px;
  box-shadow: 3px 3px 3px 3px #c4c4c4;
  position: relative;
  background-color: #fff;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep .el-scrollbar__wrap {

  height: 100%;
  height: 100%;
  overflow: scroll;
  overflow-x: auto;
}
</style>